<template>
  <div>
    <div class="demo-inner-divider">常规 InputNumber</div>
    <div class="input-number" >
      <div >
        <p>大型:</p>
        <e-input-number
          v-model="num" 
          size="large"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>默认:</p>
        <e-input-number
          v-model="num1"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>中型:</p>
        <e-input-number
          v-model="num2"
          size="middle"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>小型:</p>
        <e-input-number
          v-model="num3"
          size="small"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <div class="input-number" >
      <div>
        <p>可用:</p>
        <e-input-number
          :max="10" 
          :min="1"
          v-model="num4"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>禁用:</p>
        <e-input-number
          v-model="num5"
          disabled
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>只读:</p>
        <e-input-number
          v-model="num6"
          readonly
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>不可编辑:</p>
        <e-input-number
          v-model="num7"
          :editable="false"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>

    <div class="demo-inner-divider">格式化展示 InputNumber</div>
    <div class="input-number" >
      <div >
        <p>金额</p>
        <e-input-number
          :max="10000"
          v-model="value1"
          :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\$\s?|(,*)/g, '')"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>百分数</p>
        <e-input-number
          v-model="value2"
          :formatter="value => `${value}%`"
          :parser="value => value.replace('%', '')">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>小数</p>
        <e-input-number
          v-model="value3"
          :step="0.2">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <div class="input-number" >
      <div >
        <p>按钮位置</p>
        <e-input-number
          v-model="value4"
          controls-outside
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <inputNumber-md 
      class="markdown-body">
    </inputNumber-md>
  </div>
</template>
<script>
import inputNumberMd from '../../docs/inputNumber.md';
export default {
  name: 'DemoCheckboxAndRadio',
  components: {
    inputNumberMd
  },
  data () {
    return {
      num: 1,
      num1: 1,
      num2: 1,
      num3: 1,
      num4: 1,
      num5: 1,
      num6: 1,
      num7: 1,
      value1: 1000,
      value2: 50,
      value3: 0.8,
      value4: 1,
    }
  }
}
</script>
<style scoped>
.input-number{
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.input-number > div{
    margin-right: 50px ;
  }
.input-number p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}

.input-number span {
  display: flex;
  font-size: 12px;
  color: #999999;
}
</style>
